<template>
  <div class="wechatMenuEdit">
    <div class="title" v-text="data.level && data.level.length > 1 ? $t('configLazyLoad.channel.wexinTip42'): $t('configLazyLoad.channel.wexinTip43')">
    </div>
    <div class="menuName" >
     <p class="nametitle font14"><span v-text="data.level && data.level.length > 1 ? $t('configLazyLoad.channel.wexinTip40'): $t('configLazyLoad.channel.wexinTip44')"></span>
      <span class="nameNote" v-text="data.level && data.level.length > 1 ? $t('configLazyLoad.channel.wexinTip45'): $t('configLazyLoad.channel.wexinTip46')"></span>
     </p>
      <el-input v-model.trim="data.name" @blur="checkName"></el-input>
    </div>
    <div class="menuContent" v-if="(data.level && data.level.length > 1) || (data.sub_button && !data.sub_button.length)">
      <div class="content_top">
        <p class="font14" style="padding: 7px 0;" v-text="data.level && data.level.length > 1 ? $t('configLazyLoad.channel.wexinTip47'): $t('configLazyLoad.channel.wexinTip48')"></p>
        <el-radio-group v-model.trim="data.type">
          <el-radio label="0">{{$t('configLazyLoad.channel.wexinTip49')}}</el-radio>
          <el-radio label="1">{{$t('configLazyLoad.channel.wexinTip50')}}</el-radio>
          <el-radio label="2">{{$t('configLazyLoad.channel.wexinTip51')}}</el-radio>
          <el-radio label="3">{{$t('configLazyLoad.channel.wexinTip52')}}</el-radio>
          <el-radio label="4">{{$t('configLazyLoad.channel.wexinTip53')}}</el-radio>
        </el-radio-group>
      </div>
      <div class="content-main">
        <div class="imgTxt" v-if="data.type === '0'">
          <div class="imgTxtTitle">
            <span @click="changeTxtType('imgTxt')" :class="{active: data.imgOrTxtType === 'imgTxt'}">
              <i class="iconfont icon-tupian"></i>
              {{$t('configLazyLoad.channel.wexinTip54')}}
            </span>
            <span @click="changeTxtType('Txt')" :class="{active: data.imgOrTxtType === 'Txt'}">
              <i class="iconfont icon-biaoji"></i>
              {{$t('configLazyLoad.channel.wexinTip55')}}
            </span>
          </div>
          <div class="imgTxtContent">
            <div class="newImgTxt" v-if="data.imgOrTxtType === 'imgTxt' && !hasImgTxt" @click="showEditDialog">
              <p class="add-plus"><i class="el-icon-plus"></i></p>
              <p><span>{{$t('configLazyLoad.channel.wexinTip56')}}</span></p>
            </div>
            <div class="hasSavedMsg" v-if="data.imgOrTxtType === 'imgTxt' && hasImgTxt">
              <h4 class="font16" style="font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">{{imgTxtData.title}}</h4>
              <h6 class="font14">{{imgTxtData.author}}</h6>
              <img :src="imgTxtData.url" class="cover_pic">
              <p class="article font12" v-html="imgTxtData.content"></p>
              <a class="content_url" :href="imgTxtData.content_source_url" target="_blank">{{$t('configLazyLoad.channel.wexinTip57')}}</a>
            </div>
            <span class="articleoption" @click="editImg" v-if="data.imgOrTxtType === 'imgTxt' && hasImgTxt">{{$t('public.edit2')}}</span>
            <div class="Txt" v-if="data.imgOrTxtType === 'Txt'">
              <textarea :rows="8" id="wechatTxtTextarea" min="1" :maxlength="600" autofocus v-model.trim="data.txtContent" class="robotTextarea"></textarea>
              <div class="footer">
                <el-popover ref="popover1" placement="top" width="472" trigger="click" v-model="faceVisible" :offset="-230">
                  <emoji-face @setEmojiFace="emojiFaceData">
                  </emoji-face>
                </el-popover>
                <i class="msg_do icon-biaoqing iconfont" v-popover:popover1></i>
                <span class="txttip">{{$t('configLazyLoad.channel.wexinTip58')}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="url" v-if="data.type === '1'">
          <p style="margin: 8px 0;">{{$t('configLazyLoad.channel.wexinTip59')}}</p>
          <p style="margin: 3px 0;">{{$t('configLazyLoad.channel.wexinTip60')}}</p>
          <el-input v-model.trim="data.urlContent">
          </el-input>
        </div>
        <div class="robot" v-if="data.type === '2'">
          <textarea :rows="8" min="1" :maxlength="600" id="wechatRobotTextarea" autofocus v-model.trim="data.robotContent" class="robotTextarea"></textarea>
          <div class="footer">
            <el-popover ref="popover2" placement="top" width="472" trigger="click" v-model="faceVisible" :offset="-230">
              <emoji-face @setEmojiFace="emojiFaceData">
              </emoji-face>
            </el-popover>
            <i class="msg_do icon-biaoqing iconfont" v-popover:popover2></i>
            <span class="txttip">{{$t('configLazyLoad.channel.wexinTip58')}}</span>
          </div>
        </div>
        <div class="url" v-if="data.type === '3'">
          <p style="margin: 8px 0;">{{$t('configLazyLoad.channel.wexinTip59')}}</p>
          <p style="margin: 3px 0;">{{$t('configLazyLoad.channel.wexinTip60')}}</p>
          <el-input v-model.trim="data.evaluateContent" disabled></el-input>
        </div>
        <div v-if="data.type === '4'" class="wxMiniBox">
          <p>{{$t('configLazyLoad.channel.wexinTip61')}}</p>
          <el-form :model="data" :rules="wxMiniRules" ref="data" label-width="100px" label-position="left">
            <el-form-item :label="$t('configLazyLoad.channel.wexinTip65')" prop="appid">
              <el-input v-model.trim="data.appid"></el-input>
              <el-tooltip effect="dark" :content="$t('configLazyLoad.channel.wexinTip62')" placement="bottom">
                <i class="iconfont icon-tixingweizhi"></i>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="$t('configLazyLoad.channel.wexinTip63')" prop="pagepath">
              <el-input v-model.trim="data.pagepath"></el-input>
              <el-tooltip effect="dark" :content="$t('configLazyLoad.channel.wexinTip64')" placement="bottom">
                <i class="iconfont icon-tixingweizhi"></i>
              </el-tooltip>
            </el-form-item>
            <el-form-item :label="$t('configLazyLoad.channel.wexinTip66')" prop="url">
              <el-input v-model.trim="data.url"></el-input>
              <el-tooltip effect="dark" :content="$t('configLazyLoad.channel.wexinTip67')" placement="bottom">
                <i class="iconfont icon-tixingweizhi"></i>
              </el-tooltip>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footerButton">
      <el-button class="primary_btn" @click="deleteMenu">{{$t('public.delete')}}</el-button>
      <el-button type="primary" class="primary_btn" @click="save">{{$t('configLazyLoad.channel.wexinTip28')}}</el-button>
    </div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" width="50%"  :visible.sync="editDialogShow">
      <weixinedit-dialog v-if="editDialogShow" :weixindata="weixindata" :imgdata="imgTxtData" @saveDone="imgTxtSave" @cancel="imgTxtCancel"></weixinedit-dialog>
    </el-dialog>
  </div>
</template>

<script>
  import weixineditDialog from './weixineditDialog.vue'
  import EmojiFace from '@/components/public-modules/emoji-face'
  export default {
    name: 'wechatMenuEdit',
    data () {
      return {
        data: {},
        editDialogShow: false,
        hasImgTxt: false,
        imgTxtData: {},
        faceVisible: false,
        wxMiniRules: {
          appid: [{
            required: true, message: this.$t('configLazyLoad.channel.wexinTip68'), trigger: 'blur'
          }],
          pagepath: [{
            required: true, message: this.$t('configLazyLoad.channel.wexinTip69'), trigger: 'blur'
          }],
          url: [{
            required: true, message: this.$t('configLazyLoad.channel.wexinTip70'), trigger: 'blur'
          }]
        }
      }
    },
    props: ['menudata', 'weixindata', 'wechatCsr'],
    watch: {
      menudata () {
        this.data = this.menudata
        this.editDialogShow = false
        this.imgTxtData = {}
        this.hasImgTxt = false
        if (!this.data.type) {
          this.$set(this.data, 'type', '0')
        }
        if (!this.data.imgOrTxtType) {
          this.$set(this.data, 'imgOrTxtType', 'imgTxt')
        }
        if (!this.data.txtContent) {
          this.$set(this.data, 'txtContent', '')
        }
        if (!this.data.urlContent) {
          this.$set(this.data, 'urlContent', 'http://')
        }
        if (!this.data.evaluateContent) {
          this.data.evaluateContent = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.weixindata.authorizer_appid + '&redirect_uri=' + this.weixindata.wechatUrl + '/oAuthWx&response_type=code&scope=snsapi_base&state=evaluate_in&component_appid=' + this.weixindata.appId + '#wechat_redirect'
        }
        if (!this.data.robotContent) {
          this.data.robotContent = ''
        }
        if (!this.data.appid) {
          this.$set(this.data, 'appid', '')
        }
        if (!this.data.url) {
          this.$set(this.data, 'url', 'http://')
        }
        if (!this.data.pagepath) {
          this.$set(this.data, 'pagepath', '')
        }
        if (this.data.type === '0' && this.data.media_id) {
          let data = {
            _id: this.weixindata._id,
            mediaId: this.data.media_id
          }
          this.$store.dispatch('getMaterial', data).then((res) => {
            if (res.success) {
              this.imgTxtData = res.data.data
              this.hasImgTxt = true
            }
          })
        }
        if (this.data.type === '0' && this.data.article_id) {
          let data = {
            _id: this.weixindata._id,
            mediaId: this.data.article_id
          }
          this.$store.dispatch('getArticle', data).then((res) => {
            if (res.success) {
              this.imgTxtData = res.data.data
              this.hasImgTxt = true
            }
          })
        }
      }
    },
    methods: {
      deleteMenu () {
        this.$emit('delete')
      },
      emojiFaceData (data) { // 添加表情
        if (this.data.type === '0' && this.data.imgOrTxtType === 'Txt') {
          document.getElementById('wechatTxtTextarea').focus()
          this.data.txtContent = this.data.txtContent + data.value
        } else if (this.data.type === '2') {
          document.getElementById('wechatRobotTextarea').focus()
          this.data.robotContent = this.data.robotContent + data.value
        }
        this.faceVisible = false
      },
      editImg () {
        this.editDialogShow = true
      },
      imgTxtCancel () {
        this.editDialogShow = false
      },
      imgTxtSave (data) {
        if (data.flag) {
          this.editDialogShow = false
        }
        this.hasImgTxt = true
        this.imgTxtData = data.imgTxt
        if (data.imgTxt.media_id) {
          this.data.media_id = data.imgTxt.media_id
        }
        if (data.imgTxt.article_id) {
          this.data.article_id = data.imgTxt.article_id
        }
        this.data.articleUrl = data.imgTxt.url
      },
      showEditDialog () {
        this.editDialogShow = true
      },
      save () {
        // 当小程序时，需要验证
        if (this.data.type === '4') {
          if (this.data.appid === '' || this.data.pagepath === '' || (this.data.url === '' || this.data.url === 'http://')) {
            this.$message.warning(this.$t('configLazyLoad.channel.wexinTip71'))
            return
          }
        }
        this.$emit('save')
      },
      changeTxtType (type) {
        this.data.imgOrTxtType = type
      },
      checkName () {
        let name = this.data.name
        if (name && name.length) {
          for (let t = 0, i = 0; i < name.length; i++) {
            let s = name.charCodeAt(i)
            s >= 1 && s <= 126 || s >= 65376 && s <= 65439 ? t++ : t += 2
            if ((this.data.level.length && this.data.level.length === 1 && t > 8) || (this.data.level.length && this.data.level.length > 2 && t > 16)) {
              name = name.substr(0, i)
              this.data.name = name
              this.$message.warning(this.$t('configLazyLoad.channel.wexinTip72'))
              break
            }
          }
        }
      }
    },
    mounted () {
      this.data = this.menudata
      if (!this.data.type) {
        this.$set(this.data, 'type', '0')
      }
      if (!this.data.type) {
        this.$set(this.data, 'type', '0')
      }
      if (!this.data.imgOrTxtType) {
        this.$set(this.data, 'imgOrTxtType', 'imgTxt')
      }
      if (!this.data.txtContent) {
        this.$set(this.data, 'txtContent', '')
      }
      if (!this.data.urlContent) {
        this.$set(this.data, 'urlContent', 'http://')
      }
      if (!this.data.evaluateContent) {
        this.data.evaluateContent = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.weixindata.authorizer_appid + '&redirect_uri=' + this.weixindata.wechatUrl + '/oAuthWx&response_type=code&scope=snsapi_base&state=evaluate_in&component_appid=' + this.weixindata.appId + '#wechat_redirect'
      }
      if (!this.data.robotContent) {
        this.data.robotContent = ''
      }
      if (!this.data.appid) {
        this.$set(this.data, 'appid', '')
      }
      if (!this.data.url) {
        this.$set(this.data, 'url', '')
      }
      if (!this.data.pagepath) {
        this.$set(this.data, 'pagepath', '')
      }
    },
    components: {
      weixineditDialog,
      EmojiFace
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .wechatMenuEdit
    width 100%
    .title
      border-bottom: 1px solid #e7e7e7;
      padding-bottom: 8px;
      margin-bottom: 20px;
      font-size: 14px;
    .menuName
      margin-bottom 20px
      .nametitle
        margin-bottom 2px
      .nameNote
        color $c-prompt
    .menuContent
      .content_top
        margin-bottom 20px
      .content-main
        background #fff
        height 300px
        position: relative
        .imgTxt
          .imgTxtTitle
            padding: 10px;
            font-size: 14px;
            border-bottom: solid 1px $cf-level3;
            span
              margin-right 50px
              font-weight: 500;
              color: black;
              cursor: pointer;
              opacity: 0.5;
            .active
              opacity 1
          .newImgTxt
            width: 180px;
            height: 100px;
            border: 2px dotted #d9dadc;
            cursor: pointer;
            margin: 57px auto;
            text-align center
            color: #9D9E9E;
            .add-plus
              font-size: 40px;
              margin-top: 21px;
          .hasSavedMsg
            width: 290px;
            height: 255px;
            overflow: hidden;
            position: relative;
            margin: 7px 0 0 10px;
            text-overflow: ellipsis;
            padding: 0 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            .cover_pic
              width: 270px;
              height: 145px;
              margin: 0 0 5px 0;
            .article
              display: -webkit-box;
              box-orient: vertical;
              -webkit-line-clamp: 2;
              height: 33px;
              overflow: hidden;
            .content_url
              margin-top 2px
              color: $btn-color
          .articleoption
            position: absolute;
            right: 6px;
            bottom: 0px;
            cursor pointer
            color: $btn-color
        .url
          padding:10px 20px
          font-size 14px
        .robot,.Txt
          .robotTextarea
            display: block;
            width: 100%;
            border: 0;
            resize: none;
            box-shadow: none;
            margin: 0;
            overflow-x: hidden;
          .footer
            position: absolute
            bottom 0
            height 30px
            width 100%
            border-top solid 1px $cf-level3
            i
              margin-left 5px
              font-size 16px
              vertical-align -9px
              cursor pointer
              &:hover
                color: $btn-color
            .txttip
              float right
              margin: 5px 8px 0 0;
    .wxMiniBox
      margin-left 10px
      padding 10px
      p
        padding 10px 0px
      .wxMiniNotice
        color #3B5998
    .footerButton
      margin-top 13px
      text-align center
    .icon-tixingweizhi
      border 1px solid #459ae9
      border-radius 50%
      display inline-block
      height 16px
      width 16px
      text-align center
      line-height 16px
      margin 12px 0px 0px 5px
      color #459ae9
      font-size 10px
</style>
<style lang="stylus">
  .wechatMenuEdit
    .content_top
      .el-radio:last-child
        margin-left: 5px
        margin-top 10px
      .el-radio:nth-child(4)
        margin-left 0px
    .wxMiniBox
      .el-form-item
        margin-bottom 20px
        .el-input
          width 85%
</style>
